<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="赵鹤阳">
    <title>唯品会</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            height: 2000px;
        }

        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
            color: #aaa;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .nav {
            width: 100%;
            height: 30px;
            background-color: #f5f5f5;
        }

        .nav-list li {
            height: 30px;
            position: relative;
        }

        .nav-list li a {
            display: block;
            height: 28px;
            color: #666;
            font-size: 13px;
        }

        .nav-left>li {
            width: 60px;
            height: 100%;
            float: left;
            margin-top: 3px;
            text-align: center;
        }

        .nav-right {
            float: right;
        }

        .nav-right>li {
            float: left;
            margin: 4px 17px;
            padding-left: 5px;
        }

        .nav-right>li:nth-of-type(1) {
            width: 60px;
            text-align: center;
        }

        .nav-right>li:nth-of-type(5) {
            width: 90px;
            text-align: center;
        }

        .nav-right>li:nth-of-type(6) {
            width: 96px;
            text-align: center;
        }

        .nav-right>li:nth-of-type(7) {
            width: 95px;
            text-align: center;
        }

        .nav-right>li:nth-of-type(8) {
            width: 68px;
            text-align: center;
        }

        .nav-right>li:nth-of-type(9) {
            width: 70px;
            text-align: center;
        }

        .nav-right>li::after {
            content: '';
            background-image: url(img/header.png);
            position: absolute;
            background-position: -136px 0;
            width: 10px;
            height: 15px;
            top: 3px;
            left: -20px;
        }

        .nav-right>li:nth-of-type(1)::after {
            display: none;
        }

        .nav-right>li:nth-of-type(3)::after {
            left: -40px;
        }

        .nav-right>li:nth-of-type(8) {
            left: 15px;
        }

        .nav-right>li:nth-of-type(8)::before {
            content: '';
            background-image: url(img/header.png);
            position: absolute;
            background-position: -95px -148px;
            width: 20px;
            height: 30px;
            left: -1px;
        }

        .nav-right>li:nth-of-type(3)::before {
            content: '';
            background-image: url(img/header_sign.gif);
            position: absolute;
            background-position: 0px 0px;
            width: 16px;
            height: 15px;
            left: -20px;
        }

        .icon,
        .li-icon,
        .lo-icon {
            background-image: url(img/1.png);
            position: absolute;
            background-position: -60px 0;
            width: 10px;
            height: 8px;
            top: 8px;
            left: 53px;
            transition: all 0.1s linear;
        }

        .li-icon {
            left: 82px;
        }

        .lo-icon {
            left: 87px;
        }

        .nav-city {
            width: 180px;
            font-size: 14px;
            background-color: #fff;
            position: absolute;
            top: 27px;
            left: -1px;
            display: none;
            border: 1px solid #d4d4d4;
            border-top: none;
            z-index: 11;
        }

        .nav-login {
            width: 320px;
            height: 180px;
            font-size: 14px;
            left: -1px;
            background-color: #fff;
            position: absolute;
            display: none;
            border: 1px solid #d4d4d4;
            border-top: none;
            z-index: 22;
        }

        .head {
            background-image: url(img/header.png);
            position: absolute;
            background-position: 0 -188px;
            width: 30px;
            height: 55px;
            top: 20px;
            left: 47px;
        }

        .nav-login p {
            width: 180px;
            margin-top: 30px;
            margin-left: 100px;
            border-bottom: 1px solid #aaa;
        }

        .nav-login li {
            width: 120px;
            float: left;
            margin: 5px 15px;
            line-height: 20px;
        }

        .nav-city>span {
            border-bottom: 1px solid #aaa;
            text-align: center;
        }

        .nav-city>li {
            margin-left: -100px;
        }

        .nav-list li a:hover {
            color: #f10180;
        }

        .nav-left>li:hover .nav-city {
            display: block;
        }

        .nav-right>li:hover .nav-login {
            display: block;
        }

        .nav-list li:hover .icon {
            transform: rotate(180deg);
        }

        .nav-right>li:nth-of-type(5):hover .li-icon {
            transform: rotate(180deg);
        }

        .nav-right>li:nth-of-type(6):hover .lo-icon {
            transform: rotate(180deg);
        }

        .nav-right>li:nth-of-type(7):hover .li-icon {
            transform: rotate(180deg);
        }

        .nav-left>li:hover,
        .nav-right>li:nth-of-type(1):hover,
        .nav-right>li:nth-of-type(5):hover,
        .nav-right>li:nth-of-type(6):hover,
        .nav-right>li:nth-of-type(7):hover,
        .nav-right>li:nth-of-type(8):hover,
        .nav-right>li:nth-of-type(9):hover {
            border-left: 1px solid #d3d3d3;
            border-right: 1px solid #d3d3d3;
            background-color: #fff;
        }

        .nav-sign {
            width: 500px;
            height: 180px;
            background-color: #fff;
            position: absolute;
            box-shadow: 0 0 3px #999;
            left: -220px;
            display: none;
            z-index: 33;
        }

        .row {
            width: 20px;
            height: 15px;
            position: absolute;
            background-image: url(img/sprite.png);
            background-position: -129px -192px;
            top: -12px;
            left: 235px;
        }

        .sign {
            background-image: url(img/header.png);
            position: absolute;
            width: 30px;
            height: 10px;
            left: 18px;
            background-position: -49px -195px;
        }

        .nav-sign li {
            margin-left: 30px;
            margin-top: 50px;
            float: left;
        }

        .line {
            width: 390px;
            height: 60px;
            border-top: 2px solid #aaa;
            border-bottom: 1px solid #999;
            margin-top: 42px;
            margin-left: 50px;
        }

        .line span {
            padding: 0 13px;
        }

        .nav-sign a span {
            border-bottom: 1px solid #999;
            line-height: 50px;
            margin-left: 50px;
        }

        .nav-sign a button {
            color: white;
            width: 60px;
            height: 25px;
            background-color: #f10180;
            border: none;
            outline: none;
            border-radius: 10px;
            margin-left: 120px;
        }

        .nav-right>li:nth-of-type(3):hover .nav-sign {
            display: block;
        }

        .nav-sell {
            width: 120px;
            font-size: 14px;
            background-color: #fff;
            position: absolute;
            top: 27px;
            left: -1px;
            display: none;
            border: 1px solid #d4d4d4;
            border-top: none;
            z-index: 17;
        }

        .nav-sell>li {
            margin: 10px;
        }

        .nav-right>li:nth-of-type(5):hover .nav-sell {
            display: block;
        }

        .nav-right>li:nth-of-type(6):hover .nav-vip {
            display: block;
        }

        .nav-right>li:nth-of-type(7):hover .nav-kehu {
            display: block;
        }

        .nav-right>li:nth-of-type(8):hover .nav-phone {
            display: block;
        }

        .nav-right>li:nth-of-type(9):hover .nav-more {
            display: block;
        }

        .nav-vip {
            width: 95px;
            font-size: 14px;
            background-color: #fff;
            position: absolute;
            top: 27px;
            left: -1px;
            display: none;
            border: 1px solid #d4d4d4;
            border-top: none;
            z-index: 18;
        }

        .nav-kehu {
            width: 95px;
            font-size: 14px;
            background-color: #fff;
            position: absolute;
            top: 27px;
            left: -1px;
            display: none;
            border: 1px solid #d4d4d4;
            border-top: none;
            z-index: 21;
        }

        .nav-phone {
            width: 200px;
            height: 200px;
            font-size: 14px;
            background-color: #fff;
            position: absolute;
            left: -133px;
            display: none;
            border: 1px solid #d4d4d4;
            border-top: none;
            z-index: 20;
        }

        .nav-phone .wei {
            background-image: url(img/qr.jpg);
            background-size: 160px;
            background-repeat: no-repeat;
            position: absolute;
            top: 10px;
            width: 320px;
            height: 320px;
            background-position: 0 0;
            left: 20px;
        }

        .nav-phone .wei p {
            margin-top: 140px;
            margin-left: -150px;
        }

        .nav-more {
            width: 300px;
            height: 150px;
            font-size: 14px;
            background-color: #fff;
            position: absolute;
            left: -230px;
            display: none;
            border: 1px solid #d4d4d4;
            border-top: none;
            z-index: 8;
        }

        .lian li {
            float: left;
            margin-top: 10px;
            margin-left: 20px;
        }

        .about {
            width: 250px;
            height: 80px;
            margin-top: 50px;
            margin-left: 25px;
            border-top: 1px solid #d3d3d3;
        }

        .about li {
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }

        header {
            width: 100%;
            height: 100px;
        }

        .con-left li {
            float: left;
        }

        .con-left .logo img {
            height: 100px;
        }

        .con-right li:nth-of-type(4)::before {
            content: '';
            background-image: url(img/header.png);
            background-position: 0px -56px;
            width: 18px;
            height: 30px;
            top: 5px;
            left: 15px;
            position: absolute;
        }

        .con-right img {
            height: 100px;
        }

        .con-right {
            float: right;
        }

        .con-right li {
            position: relative;
            padding: 0 10px;
            float: left;
        }

        .con-right .p {
            text-align: right;
            line-height: 35px;
            height: 35px;
            width: 120px;
            margin-top: 30px;
        }

        .con-right .p:hover {
            background-color: #fff;
            border: 1px solid black;
            border-bottom: none;
        }

        .con-right .p:hover .trolley {
            display: block;
        }

        .trolley {
            width: 300px;
            height: 100px;
            top: 35px;
            left: -180px;
            position: absolute;
            border: 1px solid #000;
            border-top: none;
            background-color: #fff;
            display: none;
            z-index: 11;
        }

        .trolley li {
            font-size: 10px;
            text-align: center;
            line-height: 100px;
        }

        .con-right>li a {
            font-size: 14px;
            color: #aaa;
        }

        main {
            width: 100%;
            height: 40px;
            margin-top: 20px;
            background-color: #f10180;
            z-index: 30;
        }

        .main-left>li,
        .main-right>li {
            line-height: 40px;
            height: 40px;
        }

        main li a {
            color: #f5f5f5;
        }

        .main-left>li {
            margin: 0px 10px;
            width: 60px;
            font-size: 14px;
            text-align: center;
            float: left;
        }

        .main-right {
            float: right;
        }

        .main-right>li {
            position: relative;
            float: left;
            margin: 0px 15px;
            width: 80px;
            text-align: right;
        }

        .sosuo {
            background-image: url(img/yugao.png);
            position: absolute;
            width: 20px;
            height: 30px;
            left: 5px;
            top: 3px;
            background-position: 0 0;
        }

        .yudao {
            background-image: url(img/fenlei.png);
            position: absolute;
            width: 20px;
            height: 30px;
            left: 15px;
            top: 3px;
            background-position: 0 0;
        }

        .main-left li.first {
            width: 60px;
            text-align: center;
            background-color: #db0a76;
        }

        .main-left li:hover .row {
            border-top: 5px solid white;
            border-right: 5px solid #db0a76;
            border-bottom: 5px solid #db0a76;
            border-left: 5px solid #db0a76;
            transform: rotate(180deg);
        }

        .row {
            position: relative;
            top: -22px;
            left: 45px;
            width: 0px;
            height: 0px;
            border-top: 5px solid white;
            border-right: 5px solid #f10180;
            border-bottom: 5px solid #f10180;
            border-left: 5px solid #f10180;
        }

        .bello {
            width: 600px;
            height: 300px;
            background-color: #fff;
            position: absolute;
            margin-top: -10px;
            left: 470px;
            display: none;
            border: 1px solid #d4d4d4;
            z-index: 55;
        }

        .bello li {
            height: 90px;
            margin: 10px;
            float: left;
            position: relative;
            overflow: hidden;
        }

        .bello li img {
            border-radius: 10px;
        }

        .bello .shade {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 50%;
            left: 0;
            transition: all 0.3s;
        }

        .bello li :hover .shade {
            opacity: 1;
            top: 0;
        }


        .main-left>li:hover,
        .main-right>li:hover {
            background-color: #db0a76;
        }

        .main-left>li:nth-of-type(9):hover .bello {
            display: block;
        }

        .tu {
            background-image: url(img/lunbo_bg.jpg);
            background-position: 0 0;
            width: 1902px;
            margin: 0 auto;
            height: 500px;
            background-repeat: no-repeat;
        }

        .lunbo {
            position: relative;
            width: 1135px;
            height: 450px;
            margin-left: 40px;
            z-index: 10;
        }

        .tu .lunbo li img {
            width: 1100px;
            height: 385px;
        }

        .lunbo li {
            position: absolute;
            top: 60px;
            left: 15px;
            display: none;
        }

        .tu .lunbo li.active {
            display: block;
        }

        .guide {
            margin-top: -5px;
            margin-left: 30px;
            width: 1140px;
            height: 40px;
            background-color: #f9f9f9;
            display: flex;
            justify-content: space-around;
        }

        .guide li {
            margin-left: 10px;
            line-height: 40px;
            height: 40px;
            width: 190px;
            text-align: center;
        }

        .guide li a {
            font-size: 14px;
            color: #aaa;
        }

        .guide .gu {
            border-bottom: 2px solid #db0a76;
        }

        .good-list>li {
            background-image: url(img/bg_v3.jpg);
            background-repeat: no-repeat;
            width: 100%;
            height: 180px;
            margin-top: 30px;
            margin-left: 20px;
        }

        .hot {
            float: right;
            padding: 0 100px;
        }

        .hot li {
            position: relative;
            width: 100px;
            height: 100px;
            float: left;
            margin-top: 25px;
            margin-left: 100px;
        }

        .hot li img {
            width: 150px;
        }

        .sion {
            background-image: url(img/icon.png);
            background-position: 0 0;
            width: 50px;
            height: 50px;
            position: absolute;
            top: -20px;
            left: 120px;
        }

        .new {
            background-image: url(img/title_v2.jpg);
            background-repeat: no-repeat;
            width: 100%;
            height: 180px;
            margin-top: 30px;
        }

        .btn {
            position: relative;
            width: 1130px;
            height: 30px;
            top: 250px;
        }

        .btn .tu-btn {
            width: 30px;
            height: 100%;
            background-image: url("img/lun.png");
            background-position: -10px center;
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
        }

        .btn .last {
            left: 15px;
        }

        .btn .last:hover {
            background-position: -160px center;
        }

        .btn .next {
            background-position: -60px 50%;
            right: 20px;
        }

        .btn .next:hover {
            background-position: -115px center;
        }

        .div-right {
            width: 40px;
            height: 100%;
            background-color: #000;
            position: fixed;
            right: 0px;
            bottom: 0px;
            z-index: 60;
            text-align: center;
        }

        .account {
            margin-top: 250px;
            background-color: black;
        }

        .account li {
            height: 40px;
            margin-top: 5px;
            position: relative;
        }

        .account .account-one {
            height: 50px;
        }

        .account .account-two {
            height: 130px;
        }

        .account .account-seven {
            margin-top: 180px;
        }

        .account-two p {
            width: 30px;
            height: 80px;
            display: inline-block;
            position: absolute;
            color: #fff;
            z-index: 999;
            top: 12px;
            left: 3px;
        }

        .account-one .id {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 35px;
            height: 40px;
            background-position: 0 -130px;
            left: 0px;
            top: 5px;
        }

        .account-one .id:hover {
            background-image: url(img/sprite.png);
            position: absolute;
            background-position: -39px 0px;
            width: 100%;
            height: 40px;
            background-color: #db0a76;
        }

        .account-two .car {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 100%;
            height: 130px;
            background-position: 0 0;
            left: 0px;
            top: 1px;
        }

        .account-two .ping {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 30px;
            height: 40px;
            background-position: -78px -125px;
            left: 0px;
            top: -3px;
        }

        .account-two .zore {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 30px;
            height: 25px;
            background-position: -20px -198px;
            left: 5px;
            top: 100px;
        }

        .account-three .quan {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 30px;
            height: 35px;
            background-position: -159px -47px;
            left: 0px;
            top: 10px;
        }

        .three-i {
            width: 100px;
            height: 30px;
            position: absolute;
            left: 400px;
            top: 10px;
            background-color: #f9f9f9;
        }

        .account-three .quan:hover {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 35px;
            background-color: #db0a76;
            background-position: -38px -128px;
        }

        .account-three:hover .three-i,
        .account-four:hover .three-i,
        .account-five:hover .three-i,
        .account-six:hover .three-i,
        .account-seven:hover .three-i,
        .account-eight:hover .three-i {
            left: -100px;
            z-index: -1;
            transition: all 0.3s linear;
        }

        .account-four .collect {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 35px;
            background-position: -80px 0px;
            left: 0px;
            top: 5px;
        }

        .account-four .collect:hover {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 35px;
            background-position: -38px -47px;
            background-color: #db0a76;
        }

        .account-five .share {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 35px;
            background-position: -120px 0px;
            left: 0px;
            top: 5px;
        }

        .account-five .share:hover {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 35px;
            background-position: -78px -45px;
            background-color: #db0a76;
        }

        .account-six .foot {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 36px;
            background-position: -159px 0px;
            left: 0px;
            top: 5px;
        }

        .account-six .foot:hover {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 36px;
            background-position: -118px -45px;
            background-color: #db0a76;
        }

        .account-seven .edit {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 36px;
            background-position: -119px -90px;
            left: 0px;
            top: 5px;
        }

        .account-seven .edit:hover {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 36px;
            background-position: -158px -88px;
            background-color: #db0a76;
        }

        .account-eight .top {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 36px;
            background-position: -80px -90px;
            left: 0px;
            top: 5px;
        }

        .account-eight .top:hover {
            background-image: url(img/sprite.png);
            position: absolute;
            width: 40px;
            height: 36px;
            background-position: -119px -132px;
            background-color: #db0a76;
        }

        .acc-id {
            width: 300px;
            height: 300px;
            position: absolute;
            background-color: #fff;
            left: 500px;
            top: 5px;
            z-index: -9;
        }

        .tou {
            background-image: url(img/header.png);
            position: absolute;
            width: 50px;
            height: 50px;
            left: 120px;
            top: 30px;
            background-position: 0 -186px;
        }

        .how {
            top: 30px;
            left: 45px;
            width: 200px;
        }

        .how a {
            color: #f10180;
        }

        .account-one:hover .acc-id {
            left: -300px;
            transition: all 0.3s linear;
        }

        .order {
            position: absolute;
            width: 100%;
            height: 140px;
            background-color: #f8f8f8;
            left: 0px;
            bottom: 40px;
        }

        .order-left {
            width: 50%;
            height: 90px;
            border-right: 1px solid #aaa;
            margin-top: 25px;
            position: relative;
        }

        .order-right {
            width: 50%;
            height: 90px;

            margin-left: 150px;
            margin-top: -90px;
            position: relative;
        }

        .my {
            background-image: url(img/sprite.png);
            background-position: -204px -90px;
            position: absolute;
            width: 20px;
            height: 30px;
            top: 10px;
        }

        .my:hover {
            background-image: url(img/sprite.png);
            background-position: -202px 0;
            position: absolute;
            width: 20px;
            height: 30px;
        }

        .order span {
            position: absolute;
            left: 55px;
            top: 50px;
        }

        .news {
            background-image: url(img/sprite.png);
            background-position: -204px -66px;
            position: absolute;
            width: 20px;
            height: 20px;
            top: 15px;
        }

        .news:hover {
            background-image: url(img/sprite.png);
            background-position: -204px -37px;
            position: absolute;
            width: 20px;
            height: 20px;
        }

        .club {
            width: 100%;
            height: 30px;
            position: absolute;
            top: 260px;
        }

        .club a {
            font-size: 12px;
            color: #a7d2f1;
            position: absolute;
            right: 10px;
            bottom: 0;
        }

        .quit {
            position: absolute;
            background-image: url(img/sprite.png);
            background-position: -175px -170px;
            width: 20px;
            height: 20px;
            right: 15px;
            top: 15px;
        }
        .account a:hover{
            color: #f10180;
        }
    </style>
</head>

<body>
    <nav class="nav">
        <div class="container">
            <div class="nav-list">
                <ul class="nav-left">
                    <li><a href="javascript">河南<i class="icon"></i></a>
                        <ul class="nav-city">
                            <span>请选择所在的收货地址</span>
                            <li><a href="#">B 北京</a></li>
                            <li><a href="#">A 安徽</a></li>
                            <li><a href="#">D 大连 </a></li>
                            <li><a href="#">H 河北</a></li>
                            <li><a href="#">Q 青岛</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav-right">
                    <li><a href="javascript">请登录</a>
                        <ul class="nav-login">
                            <i class="head"></i>
                            <p>你好 ! [请登录]</p>
                            <li><a href="#">我的收藏</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">零钱</a></li>
                            <li><a href="#">我的优惠券</a></li>
                            <li><a href="#">我的唯品币</a></li>
                            <li><a href="#">唯品金融</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript">注册</a></li>
                    <li><a href="javascript">签到有礼</a>
                        <ul class="nav-sign">
                            <i class="row"></i>
                            <li class="sign"></li>
                            <li class="sign"></li>
                            <li class="sign"></li>
                            <li class="sign"></li>
                            <li class="sign"></li>
                            <li class="sign"></li>
                            <li class="sign"></li>
                            <div class="line">
                                <span>1天</span>
                                <span>2天</span>
                                <span>3天</span>
                                <span>4天</span>
                                <span>5天</span>
                                <span>6天</span>
                                <span>7天</span>
                            </div>
                            <a href="#"><span>每天签到送惊喜，连续签到更享心动奖励</span><button type="button">签到</button></a>

                        </ul>
                    </li>
                    <li><a href="javascript">我的订单</a></li>
                    <li><a href="javascript">我的特卖<i class="li-icon"></i></a>
                        <ul class="nav-sell">
                            <li><a href="#">品牌收藏（0）</a></li>
                            <li><a href="#">商品收藏（0）</a></li>
                            <li><a href="#">我的足迹（0）</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript">会员俱乐部<i class="lo-icon"></i></a>
                        <ul class="nav-vip">
                            <li><a href="#">俱乐部首页</a></li>
                            <li><a href="#">唯品币兑换</a></li>
                            <li><a href="#">免费抽大奖</a></li>
                        </ul>

                    </li>
                    <li><a href="javascript">客户服务<i class="li-icon"></i></a>
                        <ul class="nav-kehu">
                            <li><a href="#">联系客服</a></li>
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">服务中心</a></li>
                            <li><a href="#">知识产权投诉</a></li>
                        </ul>

                    </li>
                    <li><a href="javascript">手机版</a>
                        <ul class="nav-phone">
                            <li class="wei"><a href="#"></a>
                                <p>随时抢 及时逛</p>
                            </li>
                        </ul>
                    </li>
                    <li><a href="javascript">更多<i class="icon"></i></a>
                        <ul class="nav-more">
                            <div class="pain">
                                <span>合作专区</span>
                                <ul class="lian">
                                    <li><a href="#">联名卡申请</a></li>
                                    <li><a href="#">唯品卡</a></li>
                                    <li><a href="#">支付专区</a></li>
                                </ul>
                            </div>
                            <div class="about">
                                <span>关于我们</span>
                                <ul class="pinpai">
                                    <li><a href="#">Sell on vip</a></li>
                                    <li><a href="#">品牌招商</a></li>
                                    <li><a href="#">官方博客</a></li>
                                </ul>
                            </div>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <header>
        <div class="container">
            <ul class="con-left">
                <li class="logo"><a href="#"><img src="img/logo.png" alt=""></a></li>
            </ul>
            <ul class="con-right">
                <li><a href="#"><img src="img/logo_img01.png" alt=""></a></li>
                <li><a href="#"><img src="img/logo_img02.png" alt=""></a></li>
                <li><a href="#"><img src="img/logo_img03.png" alt=""></a></li>
                <li class="p"><a href="#">我的购物袋</a>
                    <ul class="trolley">
                        <li>好像还没有登录<a href="#">马上登录</a>查看购物袋吧</li>
                    </ul>
                </li>
            </ul>

        </div>
    </header>
    <main>
        <div class="container">
            <ul class="main-left">
                <li class="first"><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家具家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">更多</a>
                    <div class="row">
                    </div>
                    <ul class="bello">
                        <li><a href="#"><img src="img/more01.jpg" alt="">
                        <div class="shade">
                            <div class="shade-write">
                                <p>女装</p>
                            </div>
                        </div>
                        </a></li>
                        <li><a href="#"><img src="img/more02.jpg" alt="">
                        <div class="shade">
                            <div class="shade-write">
                                <p>鞋包</p>
                            </div>
                        </div>
                        </a></li>
                        <li><a href="#"><img src="img/more03.jpg" alt="">
                        <div class="shade">
                            <div class="shade-write">
                                <p>配饰</p>
                            </div>
                        </div>
                        </a></li>
                        <li><a href="#"><img src="img/more04.jpg" alt="">
                        <div class="shade">
                            <div class="shade-write">
                                <p>运动</p>
                            </div>
                        </div>
                        </a></li>
                        <li><a href="#"><img src="img/more05.jpg" alt="">
                        <div class="shade">
                            <div class="shade-write">
                                <p>唯品奢</p>
                            </div>
                        </div>
                        </a></li>
                    </ul>
                </li>
            </ul>
            <ul class="main-right">
                <li><a href="#">分类&#x3000;|<i class="sosuo"></i></a></li>
                <li><a href="#">预告 <i class="yudao"></i></a></li>
            </ul>
        </div>
    </main>
    <div class="tu">
        <div class="container">
            <ul class="lunbo">
                <li class="active"><a href="#"><img src="img/lunbo01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/lunbo02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/lunbo03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/lunbo04.jpg" alt=""></a></li>
                <div class="btn">
                    <a href="#" class="tu-btn last"></a>
                    <a href="#" class="tu-btn next"></a>
                </div>
            </ul>
            <ul class="guide">
                <li class="gu"><a href="#">欧莱雅集团VIP大牌日</a></li>
                <li><a href="#">时尚风暴最高满199减四十</a></li>
                <li><a href="#">居家下末福利大派发</a></li>
                <li><a href="#">全球旱秋扫货指南</a></li>
            </ul>
        </div>
    </div>
    <div class="good">
        <div class="container">
            <ul class="good-list">
                <li><a href="#"></a>
                    <ul class="hot">
                        <li><a href="#"><img src="img/top01.jpg" alt=""><i class="sion"></i></a></li>
                        <li><a href="#"><img src="img/top02.jpg" alt=""><i class="sion"></i></a></li>
                        <li><a href="#"><img src="img/top03.jpg" alt=""><i class="sion"></i></a></li>
                    </ul>
                </li>

            </ul>
            <li class="new"><a href="#"></a></li>
        </div>
    </div>
    <div class="div-right">
        <ul class="account">
            <li class="account-one"><i class="id"></i>
                <ul class="acc-id">
                    <i class="quit"></i>
                    <li class="tou"></li>
                    <li class="how">你好！请<a href="#">登录</a>|<a href="#">注册</a></li>
                    <div class="order">
                        <div class="order-left">
                            <i class="my"> </i>
                            <span>我的订单</span>
                        </div>
                        <div class="order-right">
                            <i class="news"></i>
                            <span>我的消息</span>
                        </div>
                    </div>
                    <div class="club">
                        <a href="#">会员俱乐部</a>
                    </div>
                </ul>
            </li>
            <li class="account-two">
                <p>购物袋</p>
                <i class="car"></i>
                <i class="ping"></i>
                <div class="zore"></div>
            </li>
            <li class="account-three"><i class="quan"></i>
                <ul class="three-i">
                    <li><a href="#">我的购物券</a></li>
                </ul>
            </li>
            <li class="account-four"><i class="collect"></i>
                <ul class="three-i">
                    <li><a href="#">我的购物券</a></li>
                </ul>
            </li>
            <li class="account-five"><i class="share"></i>
                <ul class="three-i">
                    <li><a href="#">我的购物券</a></li>
                </ul>
            </li>
            <li class="account-six"><i class="foot"></i>
                <ul class="three-i">
                    <li><a href="#">我的购物券</a></li>
                </ul>
            </li>
            <li class="account-seven"><i class="edit"></i>
                <ul class="three-i">
                    <li><a href="#">我的购物券</a></li>
                </ul>
            </li>
            <li class="account-eight"><i class="top"></i>
                <ul class="three-i">
                    <li><a href="#">我的购物券</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    var top = document.querySelector('.account-eight')
    var los = document.querySelectorAll('.tu .lunbo li');
    var lun = document.querySelector('.tu .lunbo')
    var guide = document.querySelectorAll('.tu .guide li');
    var last = document.querySelector('.btn .last');
    var next = document.querySelector('.btn .next');
    var main = document.querySelector('main');
    var close = document.querySelector('.account-one .acc-id')
    var account = document.querySelector('.account-one')
    var quit = document.querySelector('.acc-id .quit');
    var index = 0;
    account.onmouseover = function () {
        close.style.left = -close.offsetWidth + 'px';
    }
    account.onmouseout = function () {
        close.style.left = 0;
    }
    quit.onclick = function () {
        close.style.left = 0;
    }
    top.onclick = function () {
        document.body.scrollTop = 0;
    }
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop;
        if (scrollTop >= 150) {
            main.style.position = 'fixed';
            main.style.top = '-20px';
        } else {
            main.style.position = 'static';//静止
        }
    }
    function showImg() {
        for (var i = 0; i < los.length; i++) {
            los[i].className = '';
            guide[i].className = '';
        }
        los[index].className = 'active';
        guide[index].className = 'gu';
    }
    for (var i = 0; i < guide.length; i++) {
        guide[i].index = i;
        guide[i].onmouseover = function () {
            index = this.index;
            showImg();
        }
    }
    var timer = setInterval(nextImg, 1000);
    lun.onmouseover = function () {
        clearInterval(timer);
        timer = null;
        last.style.display = 'block';
        next.style.display = 'block';
    }
    lun.onmouseout = function () {
        last.style.display = 'none';
        next.style.display = 'none';
        if (timer != null) {
            return;
        }
        timer = setInterval(nextImg, 1000);
    }
    function lastImg() {
        index = index == 0 ? los.length - 1 : index - 1;
        showImg();
    }
    function nextImg() {
        index = index == los.length - 1 ? 0 : index + 1;
        showImg();
    }

    last.onclick = function () {
        lastImg();
    }
    next.onclick = function () {
        nextImg();
    }

</script>